<template>
  <view class="page">
    <u-navbar @leftClick="navLeftClick" :fixed="false" title="收益提现" placeholder bgColor="#fff"></u-navbar>
    <view class="content">
      <view class="info-item">
        <view class="u-flex">
          <text class="lable">银行账号：</text>
          <input v-model="form.bankAccount" style="width: 400rpx;font-size: 28rpx;" maxlength="20" type="number" placeholder="请输入，限20个数字" placeholder-style="color: #818181;" />
        </view>
      </view>
      <!-- <view class="info-item">
        <view class="u-flex">
          <text class="lable">开户名称：</text>
          <input v-model="form.accountName" style="width: 400rpx;font-size: 28rpx;" maxlength="20" type="text" placeholder="请输入，限20个字" placeholder-style="color: #818181;" />
        </view>
      </view> -->
      <view class="info-item">
        <view class="u-flex">
          <text class="lable">开户银行：</text>
          <input v-model="form.bankName" style="width: 400rpx;font-size: 28rpx;" maxlength="30" type="text" placeholder="请输入，限30个字" placeholder-style="color: #818181;" />
        </view>
      </view>
      <view class="info-item">
        <view class="u-flex">
          <text class="lable">所在省市：</text>
          <view class="u-flex" @click="pickerType='region'">
            <text class="u-m-r-20" style="color: #818181;">{{ form.province ? `${form.province}-${form.city}-${form.city1}` : '请选择' }}</text>
            <u-icon name="arrow-down" color="#000000" size="20rpx"></u-icon>
          </view>
        </view>
      </view>
      <view class="info-item" style="border: none;">
        <view class="u-flex">
          <text class="lable">所在支行：</text>
          <input v-model="form.bankBranchName" style="width: 400rpx;font-size: 28rpx;" maxlength="50" type="text" placeholder="请输入，限50个字" placeholder-style="color: #818181;" />
        </view>
      </view>
    </view>
    <view class="btn" @click="submit">确认提交</view>
    <u-popup :show="showGetCode" :round="20" mode="center" closeable @close="showGetCode=false">
      <view class="get-code">
        <view class="popup-title">系统检测到前后两次申请提现的账号不一致，为确保资金安全，需要校验</view>
        <view class="popup-input">
          <u--input
            placeholder="请输入手机号"
            border="surround"
            v-model="phone"
          ></u--input>
        </view>
        <view class="popup-input">
          <u--input
            placeholder="短信验证码"
            border="surround"
            v-model="code"
          >
            <text class="u-font-28" style="color: #56CB03;" slot="suffix">
              获取验证码
				    </text>
          </u--input>
        </view>
        <view class="btn" @click="submit">提交验证</view>
      </view>
		</u-popup>
    <u-picker confirmColor="#56CB03" :show="pickerType=='region'" @change="pickerChange" :columns="[cityOptions, cityOptions[pickerIndex1].citys, cityOptions[pickerIndex1].citys[pickerIndex2].areas]" keyName="cityName" @confirm="pickerConfirm" @cancel="pickerType = ''"></u-picker>
  </view>
</template>

<script>
import citys from '@/common/ChinaCitys.json'
import { setAccountsInfo } from '@/api/index'

export default {
  data() {
    return {
      type: 'bank',
      invoiceList: [],
      cityOptions: citys,
      pickerType: '',
      pickerIndex1: 0,
      pickerIndex2: 0,
      city: '',
      showGetCode: false,
      phone: '',
      code: '',
      form: {},
    };
  },
  onLoad() {},
  methods: {
    submit() {
      const that = this
      this.form.userId = uni.getStorageSync('userInfo').userId
      setAccountsInfo(this.form).then(res => {
        uni.showToast({
          icon: 'none',
          title: `绑定成功`
        })
        setTimeout(() => {
          that.goBack()
        }, 1000)
      })
    },
    pickerChange(e) {
      if(e.columnIndex === 0) {
        this.pickerIndex1 = e.index
      } else if(e.columnIndex === 1) {
        this.pickerIndex2 = e.index
      }
    },
    pickerConfirm(e) {
      if(this.pickerType == 'region') {
        this.form.province = e.value[0].cityName
        this.form.city = e.value[1].cityName
        this.form.city1 = e.value[2].cityName
      } else {
      }
      this.pickerType = ''
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 750rpx;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 80rpx;
  position: relative;
  .content {
    width: 702rpx;
    padding: 0 22rpx 16rpx;
    background-color: #fff;
    border-radius: 12rpx;
    margin: 12rpx auto 120rpx;
    .info-item {
      font-size: 28rpx;
      color: #000000;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx 0;
      border-bottom: 1rpx solid #E1E1E1;
      .lable {
        width: 168rpx;
        margin-right: 8rpx;
      }
    }
  }
  .btn {
    width: 440rpx;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    background: #56CB03;
    border-radius: 200rpx 200rpx 200rpx 200rpx;
    border: 2rpx solid #56CB03;
    font-size: 28rpx;
    color: #FFFFFF;
    margin: 36rpx auto 0;
  }
}
.get-code {
  width: 632rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding-top: 60rpx;
  padding: 60rpx 24rpx 28rpx;
  .popup-title {
    width: 492rpx;
    font-size: 28rpx;
    color: #000000;
    text-align: center;
    margin: 0 auto 26rpx;
  }
  .popup-input {
    margin-bottom: 16rpx;
  }
  .popup-tips {
    font-size: 24rpx;
    color: rgba(226, 3, 0, 1);
    text-align: center;
    margin-bottom: 16rpx;
  }
  .btn {
    width: 320rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2rpx solid #56CB03;
    font-size: 28rpx;
    border-radius: 200rpx;
    color: #fff;
    background-color: #56CB03;
  }
}
</style>
